<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org" lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <!--这里是员工和管理员界面-->
    <title>快递之家管理系统</title>
</head>
<link rel="icon" href="data:;base64,=">
<link rel="stylesheet" href="/static/layui/layui/css/layui.css">
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div th:replace="head::UserNavHeader"></div>
    <div th:replace="menu::UserNavMenu"></div>
    <div class="layui-body">
        <!-- 内容主体区域 -->
        <fieldset class="layui-elem-field layui-field-title">
            <legend>快递单列表信息</legend>
        </fieldset>
        <form class="layui-form" lay-filter="component-form-group" id="search_submits" onsubmit="return false">
            <div class="layui-form layui-card-header layuiadmin-card-header-auto" lay-filter="layadmin-useradmin-formlist">
                <div class="layui-inline">
                    <label class="layui-form-label">搜索快递单号</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" id="searchHdno" name="searchHdno" placeholder="请输入快递单号"  width="80px">
                    </div>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn" lay-submit="search_submits" lay-filter="reloadlst_submit">查询</button>
                </div>
            </div>
        </form>
        <table id="kdgl_hdTable" lay-filter="kdgl_hdTable"></table>
    </div>
    <div th:replace="bottom::NavBottom"></div>
</div>
    <form class="layui-form" id="kdgl_hd" style="display:none" lay-filter="kdgl_hdForm">
        <div class="layui-form-item">
            <label class="layui-form-label">快递单名</label>
            <div class="layui-input-block">
                <input type="hidden" name="hdid">
                <input type="hidden" name="hdno">
                <input type="hidden" id="kid" th:text="${session.user.getKid()}" name="kid">
                <input type="text" name="hdn" required  lay-verify="required" placeholder="请输入快递单名" autocomplete="on" class="layui-input" id="hdn" style="width:200px">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">寄件人</label>
            <div class="layui-input-inline">
                <input type="text" name="hdkhn" required  lay-verify="required" placeholder="请输入寄件人" autocomplete="on" class="layui-input" id="hdkhn" style="width:200px">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">寄件人电话</label>
            <div class="layui-input-block">
                <input type="text" name="hdkhtelephone" required  lay-verify="required" placeholder="请输入寄件人电话" autocomplete="on" class="layui-input" id="hdkhtelephone" style="width:200px">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">寄件人所在地</label>
            <div class="layui-input-block">
                <input type="text" name="hdkhadress" required  lay-verify="required" placeholder="请输入寄件人所在地" autocomplete="on" class="layui-input" id="hdkhadress" style="width:200px">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">收件人</label>
            <div class="layui-input-inline">
                <input type="text" name="hdshrn" required  lay-verify="required" placeholder="请输入收件人" autocomplete="on" class="layui-input" id="hdshrn" style="width:200px">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">收件人电话</label>
            <div class="layui-input-block">
                <input type="text" name="hdshrtelephone" required  lay-verify="required" placeholder="请输入收件人电话" autocomplete="on" class="layui-input" id="hdshrtelephone" style="width:200px">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">收件人所在地</label>
            <div class="layui-input-block">
                <input type="text" name="hdshradress" required  lay-verify="required" placeholder="请输入收件人所在地" autocomplete="on" class="layui-input" id="hdshradress" style="width:200px">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">货单价格</label>
            <div class="layui-input-block">
                <input type="text" name="hdprice" required  lay-verify="required" placeholder="请输入货单价格" autocomplete="on" class="layui-input" id="hdprice" style="width:200px">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">快递种类</label>
            <div class="layui-input-block">
                <input type="text" name="hdhwkind" required  lay-verify="required" placeholder="请输入快递种类" autocomplete="on" class="layui-input" id="hdhwkind" style="width:200px">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">快递重量</label>
            <div class="layui-input-block">
                <input type="text" name="hdhwweight" required  lay-verify="required" placeholder="请输入快递重量" autocomplete="on" class="layui-input" id="hdhwweight" style="width:200px">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <input type="text" name="hdinfo" required  lay-verify="required" placeholder="请输入备注" autocomplete="on" class="layui-input" id="hdinfo" style="width:200px">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">快递员</label>
            <div class="layui-input-inline">
                <input type="text" name="hdygn" required  lay-verify="required" placeholder="请输入快递员" autocomplete="on" class="layui-input" id="hdygn" style="width:200px">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">快递员电话</label>
            <div class="layui-input-block">
                <input type="text" name="hdygtelephone" required  lay-verify="required" placeholder="请输入快递员电话" autocomplete="on" class="layui-input" id="hdygtelephone" style="width:200px">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">快递状态</label>
            <div class="layui-input-block">
                <input type="radio" name="hdstatus" value="已下单" title="已下单">
                <input type="radio" name="hdstatus" value="配送中" title="配送中">
                <input type="radio" name="hdstatus" value="已送达" title="已送达" checked>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button lay-submit="kdgl_hdForm" lay-filter="sub" class="layui-btn layui-btn-normal tijiao">提交</button>
            </div>
        </div> 
    </form>


</body>
<script src="/static/layui/layui/layui.all.js"></script>
<script src="/static/jquery/jquery-3.4.0.js"></script>
<script>
    //JavaScript代码区域
    layui.use(['jquery','element','form','table','layer','laydate'], function(){
        var $ = layui.jquery;
        var element = layui.element;
        var form = layui.form;
        var table = layui.table;
        var layer = layui.layer;
        var laydate = layui.laydate;
        var kid = [[${session.user.getKid()}]];
        //第一个实例
        var tableIns = table.render({
            elem: '#kdgl_hdTable'
            , height: 'full-220'
            ,url: '/hd/getAllHdByKid?kid='+kid //数据接口
            ,page: true //开启分页
            ,cols: [ [ //表头
                ,{field: 'hdid', title: 'ID', sort: true, fixed: 'left', hide: true}
                ,{field: 'hdno', title: '快递单号'}
                ,{field: 'hdn', title: '快递单名'}
                ,{field: 'hdkhn', title: '寄件人'}
                ,{field: 'hdkhtelephone', title: '寄件人电话'}
                ,{field: 'hdkhadress', title: '寄件人所在地'}
                ,{field: 'hdshrn', title: '收件人'}
                ,{field: 'hdshrtelephone', title: '收件人电话'}
                ,{field: 'hdshradress', title: '收件人所在地'}
                ,{field: 'hdprice', title: '货单价格'}
                ,{field: 'hdhwkind', title: '快递种类'}
                ,{field: 'hdhwweight', title: '快递重量'}
                ,{field: 'hdinfo', title: '备注'}
                ,{field: 'hdygn', title: '快递员'}
                ,{field: 'hdygtelephone', title: '快递员电话'}
                ,{field: 'hdstatus', title: '货单状态'}
            ] ]
        });

        /* 监听提交 */
        form.on('submit(reloadlst_submit)', function (data) {
            var searchHdno = data.field.searchHdno;
            table.render({
                elem: '#kdgl_hdTable'
                , height: 'full-220'
                ,url: '/hd/getAllHdByHdnoAndKno?kid='+kid+"&hdno="+searchHdno //数据接口
                ,page: true //开启分页
                ,cols: [ [ //表头
                    ,{field: 'hdid', title: 'ID', sort: true, fixed: 'left', hide: true}
                    ,{field: 'hdno', title: '快递单号'}
                    ,{field: 'hdn', title: '快递单名'}
                    ,{field: 'hdkhn', title: '寄件人'}
                    ,{field: 'hdkhtelephone', title: '寄件人电话'}
                    ,{field: 'hdkhadress', title: '寄件人所在地'}
                    ,{field: 'hdshrn', title: '收件人'}
                    ,{field: 'hdshrtelephone', title: '收件人电话'}
                    ,{field: 'hdshradress', title: '收件人所在地'}
                    ,{field: 'hdprice', title: '货单价格'}
                    ,{field: 'hdhwkind', title: '快递种类'}
                    ,{field: 'hdhwweight', title: '快递重量'}
                    ,{field: 'hdinfo', title: '备注'}
                    ,{field: 'hdygn', title: '快递员'}
                    ,{field: 'hdygtelephone', title: '快递员电话'}
                    ,{field: 'hdstatus', title: '货单状态'}
                ] ]
            });
            return false;
        });

        //监听工具条的事件
        table.on('toolbar(kdgl_hdTable)', function(obj){
            switch (obj.event) {
                case 'batchDelete':
                    batchDelete();
                    break;
                case 'save':
                    save();
                    break;
            };
        });

        //监听行工具条的事件
        table.on('tool(kdgl_hdTable)', function(obj){ //注：tool 是工具条事件名，kdglTable 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            switch (obj.event) {
                case 'delete':
                    deleteInfo(data);
                    break;
                case 'update':
                    update(data);
                    break;
            };
        });

        //修改
        function update(data) {
            layer.open({
                type: 1 //Page层类型
                ,skin: 'layui-layer-molv'
                ,area: ['900px', '600px']
                ,title: ['修改货单信息','font-size:18px']
                ,shadeClose: true
                ,shade: 0 //遮罩透明度
                ,maxmin: false //允许全屏最小化
                ,content:$("#kdgl_hd") //如果要form表单提交必须是$("#t") dom元素，不能是$("#kdgl").html()
                ,success:function(layero,index){
                    form.val('kdgl_hdForm',data);
                    form.render();//动态渲染
                    form.on('submit(sub)', function(data){
                        $.ajax({
                            url:"/hd/update",
                            dataType:"json",   //返回格式为json
                            async:true,
                            data:data.field,    //参数值
                            type:"POST",   //请求方式
                            success:function(req){
                                //请求成功时处理
                                //console.log(req);
                                if(req.code === 0){
                                    layer.alert('编辑成功',{icon:1,title:'提示'},function (i) {
                                        layer.close(i);
                                        layer.close(index); //关闭弹出层
                                        $("#kdgl_hd")[0].reset(); //重置form
                                        form.render();//必须写
                                    })
                                    table.reload('kdgl_hdTable',{ //重载表格
                                        page:{
                                            curr:1
                                        }
                                    })
                                }else{
                                    layer.msg('发送失败 '+req.msg, {icon: 5});
                                }
                            },
                            error:function(){
                                //请求出错处理
                                layer.msg('发送失败', {icon: 5});
                            }
                        });
                    });
                },yes: function(){
                    layer.closeAll();
                },end:function (res) {
                    // $('.layui-layout-body').load('/hd/toHdList');
                    var index = parent.layer.getFrameIndex(window.name);
                    parent.location.reload(); //刷新父页
                    parent.layer.close(index);
                    $("#kdgl_hd").css("display",'none');
                }
            });
        }

        //修改
        function save() {
            layer.open({
                type: 1 //Page层类型
                ,skin: 'layui-layer-molv'
                ,area: ['900px', '600px']
                ,title: ['添加货单信息','font-size:18px']
                ,shadeClose: true
                ,shade: 0 //遮罩透明度
                ,maxmin: false //允许全屏最小化
                ,content:$("#kdgl_hd") //如果要form表单提交必须是$("#t") dom元素，不能是$("#kdgl_hd").html()
                ,success:function(layero,index){
                    form.render();//动态渲染
                    form.on('submit(sub)', function(data){
                        $.ajax({
                            url:"/hd/save",
                            dataType:"json",   //返回格式为json
                            async:true,
                            data:data.field,    //参数值
                            type:"POST",   //请求方式
                            success:function(req){
                                //请求成功时处理
                                //console.log(req);
                                if(req.code === 0){
                                    layer.alert('编辑成功',{icon:1,title:'提示'},function (i) {
                                        layer.close(i);
                                        layer.close(index); //关闭弹出层
                                        $("#kdgl_hd")[0].reset(); //重置form
                                        form.render();//必须写
                                    })
                                    table.reload('kdgl_hdTable',{ //重载表格
                                        page:{
                                            curr:1
                                        }
                                    })
                                }else{
                                    layer.msg('发送失败 '+req.msg, {icon: 5});
                                }
                            },
                            error:function(){
                                //请求出错处理
                                layer.msg('发送失败', {icon: 5});
                            }
                        });
                    });
                },yes: function(){
                    layer.closeAll();
                },end:function (res) {
                    // $('.layui-layout-body').load('/hd/toHdList');
                    var index = parent.layer.getFrameIndex(window.name);
                    parent.location.reload(); //刷新父页
                    parent.layer.close(index);
                    $("#kdgl_hd").css("display",'none');
                }
            });
        }

        //删除
        function deleteInfo(data) {
            layer.confirm('是否确定删除这些数据？', {icon: 3, title:'提示'}, function(index){
                $.post("/hd/delete",{hdid:data.hdid},function (res) {
                    if (res.code==0){
                        tableIns.reload();
                    }
                    layer.msg(res.data);
                })
                layer.close(index);
            });
        }

        //批量删除
        function batchDelete(){
            //得到选中行
            var checkStatus = table.checkStatus('kdgl_hdTable');
            var data = checkStatus.data; //获取选中行数据
            var length = checkStatus.data.length;//获取选中行数量，可作为是否有选中行的条件
            if (length>0){
                layer.confirm('是否确定删除这些数据？', {icon: 3, title:'提示'}, function(index){
                    var ids = "";
                    $.each(data,function (index,item) {
                        if (index==0){
                            ids += "ids="+item.id;
                        }else {
                            ids += "&ids="+item.id;
                        }
                        alert(ids);
                    })
                    $.post("/hd/batchDelete",ids,function (res) {
                        if (res.code==0){
                            tableIns.reload();
                        }
                        layer.msg(res.data);
                    })
                    layer.close(index);
                });
            }else {
                layer.msg("请选中操作行");
            }
        }
    });
</script>
</html>